<template>
    <div v-bind:class="[activeClass,borderClass]"></div>
    <div v-bind:class="[isActive ? activeClass : '', borderClass]"></div>
    <div v-bind:class="[{active:isActive},borderClass]"></div>
</template>
<script setup>
    import {ref} from 'vue'
    const isActive = ref(true)
    const activeClass = ref('active')
    const borderClass = ref('border')
</script>
<style>
    .active{
        width: 100px;
        height:10px;
        margin-bottom:2px ;
        background-color : rgb(59,192,241);
    }
    .border{
        border: 1px solid black;
    }

</style>